$(function () {

    let laypage
    let form
    let layer
    layui.use(['laypage', 'form', 'layer'], function () {
        laypage = layui.laypage
        form = layui.form
        layer = layui.layer

        let data = {
            pagenum: 1,
            pagesize: 3
        }
        // ***********************加载用户列表
        function list() {
            $.ajax({
                url: "/admin/users",
                data: data,
                success: function (res) {

                    if (res.status == 0) {
                        $("tbody").html("")
                        $.each(res.data, function (index, item) {
                            let one = $(`<tr>
                        <td>${item.id}</td>
                        <td>${item.username}</td>
                        <td>${item.nickname}</td>
                        <td>${item.email}</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-xs ">
                                <a style="color: #fff" target="iframeArea" href="./edit.html?${item.id}">编辑</a>
                            </button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" del=${item.id}>删除</button>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal cz" _id=${item.id}>重置密码</button>
                        </td>
                    </tr>`)
                            $("tbody").append(one)
                        })
                        // 初始化分页器
                        bar(res.total)
                    }
                }
            })
        }
        list()

        function bar(count) {
            laypage.render({
                elem: 'articlePage', // 注意，这里的 test1 是 ID，不用加 # 号
                count: count, // 数据总数，从服务端得到,
                limit: data.pagesize, // limit限制 每页显示几条数据
                curr: data.pagenum,


                // 当用户点击页面跳转的时候：
                jump: function (obj, first) {
                    // 用户自己点击 跳转
                    if (first == undefined) {

                        // obj是用户操作后对象数据  obj.curr
                        data.pagenum = obj.curr
                        // ajax
                        list()

                    }
                }
            })
        }




        // ************************删除用户
        $("tbody").on("click", ".delete", function () {
            let id = $(this).attr("del")
            //console.log(id)
            layer.confirm("确定要删除吗？", function (index) {
                // 关闭弹窗
                layer.close(index)
                $.ajax({
                    url: "/admin/users/" + id,
                    type: "DELETE",
                    success: function (res) {
                        layer.msg(res.message)
                        list()
                    }
                })

            })

        })



        // ***********************重置密码的form表单
        let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="text" name="password" required lay-verify="required|length" placeholder="请输入新密码" autocomplete="off" class="layui-input  newPwd">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block ">
          <input type="text" required lay-verify="required|pass" placeholder="请重复输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
        $("tbody").on("click", ".cz", function () {
            let id = $(this).attr('_id')
            //console.log(id);

            let index = layer.open({
                type: 1,
                title: "重置密码",
                content: str,
                area: ['500px', '270px'],
            })

            form.verify({
                length: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],


                pass: function (value, item) {
                    let newPwd = $(".newPwd").val()
                    if (value != newPwd) {
                        return "两次密码输入不一致"
                    }
                }
            })


            $("#repwd-form").on("submit", function (e) {
                e.preventDefault()

                let data = $(this).serialize()
                $.ajax({
                    url: "/admin/users/" + id,
                    type: "PUT",
                    data: data,
                    success: function (res) {
                        layer.msg(res.message)
                        layer.close(index)
                        list()
                    }
                })

            })
        })
    })





})